<template lang="pug">
  div
    s-table(
      ref="table"
      reqUrl="api/children_month_record/list"
      req-method="POST"
      :column="tableObj.column"
      :filterProps="{fields: searchConfig}"
    )
      template(slot="created" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD')}}
      template(slot="action" slot-scope="text, scope")
        el-link(@click="actionHandle(scope, 'view')" type="info") 查看

    el-dialog(
      :visible="modalVisible"
      append-to-body
      modal-append-to-body
      @close="modalVisible = false"
    )
      iframe(
        :src="src"
        width="100%"
        height="500px"
        name="demo"
        scrolling="auto"
        sandbox="allow-same-origin allow-scripts"
      )

    <transition name="fade">
      <div v-if="show" class="modal-overlay">
        div.modal-content
          img(src="@/assets/open.png")
          div
            i.el-icon-close.close(@click="show=false")
          div.htht
            span 系统提示
            div
            div 请在微信客户端 打开链接
              img(src="@/assets/link.png")
      </div>
    </transition>
</template>
<script>
import { mapGetters } from 'vuex'
import { column } from './config'
import { getClassesByArea } from '@/api/common'
export default {
  components: {},
  data () {
    return {
      show: false,
      tableObj: {
        column
      },
      classes: [],
      classId: '',

      modalVisible: false,
      src: 'https://localhost:8080/#/pages_sub/monthly/monthly-report-page?type=preview-p&id=2c98d81f8312104201831720e65401ed'
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchConfig () {
      return [
        {
          key: 'name',
          label: '宝宝姓名'
        },
        {
          label: '选择班级',
          key: 'classId',
          type: 'select',
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          }
        }
      ]
    }
  },
  watch: {},
  created () {
    this.getClasses()
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    isWeixinBrowser () {
      var ua = navigator.userAgent.toLowerCase()
      return ua.indexOf('micromessenger') !== -1
    },

    actionHandle (row, type) {
      this.modalVisible = this.isWeixinBrowser()
      this.show = !this.isWeixinBrowser()
      this.src = `https://wp.jz1x.com/#/pages_sub/monthly/monthly-report-page?type=preview-p&id=${row.id}`
    },

    // 获取托班班级列表
    async getClasses () {
      const { curArea } = this
      this.classes = await (getClassesByArea({ areaId: curArea.areaId }) || [])
      this.classId = this.classes[0]?.id || ''
    }
  }
}
</script>
<style lang="scss" scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active in <2.1.8 */
  {
  opacity: 0;
}

.close {
  font-size: 24px;
  position: absolute;
  right: 24px;
  top: 24px;
}

.htht {
  position: absolute;
  left: 72px;
  top: 136px;

  span {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 22px;
    color: #7C818A;
    font-style: normal;
    text-transform: none;
  }

  div {
    margin-top: 16px;
    width: 226px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    font-size: 32px;
    color: #424242;
    text-shadow: 0px 2px 2px rgba(103, 34, 0, 0.06);
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: centeral;
    position: relative;
    img{
      margin-left: 8px;
      width: 24px;
      height: 24px;
      position: absolute;
      right: 65px;
      bottom: 5px;
    }
  }
}
</style>
